import React from 'react';
import styled from '@emotion/styled';
import { useTranslation } from 'react-i18next';

interface ReconnectMessageBoxProps {
	onHangup: () => void;
	type: string;
}

const InstructionsSpan = styled.span`
	color: #d7d7d7;
	font-family: simsun;
	display: inline-block;
	width: 1.5em;
	vertical-align: bottom;
	overflow: hidden;
	animation: dot 3s infinite step-start;
	@keyframes dot {
		0% {
			width: 0;
			margin-right: 1.5em;
		}
		33% {
			width: 0.5em;
			margin-right: 1em;
		}
		66% {
			width: 1em;
			margin-right: 0.5em;
		}
		100% {
			width: 1.5em;
			margin-right: 0;
		}
	}
`;

const ReconnectMessageBox = (props: ReconnectMessageBoxProps) => {
	const { t } = useTranslation();
	const { onHangup, type } = props; // type: ccs | ams | media

	return (
		<div className="reconnect-message-box-container">
			<div className="box-wrapper">
				<p className="label">{type === 'ccs' ? t('current-session-broken') : type === 'ams' ? t('disconnect-from-dispatch-system-relogin') : t('talk-network-broken')}</p>
				{type !== 'ams' && (
					<p className="label">
						{t('try-connnecting')}
						<InstructionsSpan>...</InstructionsSpan>
					</p>
				)}

				{type === 'ams' ? (
					<button className="button" onClick={onHangup}>
						{type === 'ams' ? t('relogin') : t('hangup')}
					</button>
				) : null}
			</div>
		</div>
	);
};

export default ReconnectMessageBox;
